
import React, {Fragment} from "react";
import {Alert, Button, Checkbox, Input, message, Popconfirm, Select, Table} from "antd";
import Store from "./Store";
import {simpleGenerate} from "../../../../api/work/GenerateApi";
import {observer} from "mobx-react";

@observer
class SimpleConfig extends React.Component{
    constructor(props) {
        super(props);
        this.columns = [
            {
                title: '字段',
                dataIndex: 'field',
                editable: true,
                width: '25%',
                render: (text,record) => {
                    return <Input allowClear defaultValue={text} onChange={(e) => this.handleFieldChange(record.key,e.target.value,"field")} placeholder="填写字段名称" />
                }
            },
            {
                title: '注释',
                dataIndex: 'label',
                editable: true,
                width: '25%',
                render: (text,record) => {
                    return <Input allowClear defaultValue={text} onChange={(e) => this.handleFieldChange(record.key,e.target.value,"label")} placeholder="填写字段注释" />
                }
            },
            {
                title: '组件',
                dataIndex: 'component',
                editable: true,
                width: '25%',
                render: (text, record) => {
                    console.log(text)
                    const { Option } = Select;
                    return <Select
                        showSearch
                        onChange={(value) => {this.handleFieldChange(record.key,value,"component")}}
                        style={{width:"210px"}}
                        defaultValue={text ? text : "FormInput"}
                        optionFilterProp="children"
                    >
                        <Option value="FormInput">输入框</Option>
                        <Option value="FormMulInput">文本域</Option>
                        <Option value="FormSelect">下拉选择框</Option>
                        <Option value="FormMulSelect">下拉选择-多选</Option>
                        <Option value="FormTimePicker">时间选择器</Option>
                        <Option value="FormDatePicker">日期选择器</Option>
                        <Option value="FormMonthPicker">月份选择器</Option>
                        <Option value="FormYearPicker">年份选择器</Option>
                        <Option value="FormPointPicker">经纬度选择器</Option>
                        <Option value="FormUploadSingle">单文件上传</Option>
                        <Option value="FormUpload">多文件上传</Option>
                        <Option value="FormTimeRangePicker">时间范围选择器</Option>
                        <Option value="FormDateRangePicker">日期范围选择器</Option>
                        <Option value="FormMonthRangePicker">月份范围选择器</Option>
                        <Option value="FormYearRangePicker">年份范围选择器</Option>
                        <Option value="FormRadio">单选框</Option>
                        <Option value="FormCheckBox">多选框</Option>
                        <Option value="FormPasswordInput">密码框</Option>
                    </Select>
                }
            },
            {
                title: '可编辑',
                dataIndex: 'is_edit',
                editable: true,
                width: '25%',
                render: (text,record) => {
                    return <Checkbox defaultChecked={record.is_edit} onChange={(e) => {
                        this.handleFieldChange(record.key, e.target.checked, "is_edit")
                    }}/>
                }
            },
            {
                title: '必填',
                dataIndex: 'is_required',
                editable: true,
                width: '25%',
                render: (text,record) => {
                    return <Checkbox defaultChecked={record.is_required} onChange={(e) => {
                        this.handleFieldChange(record.key, e.target.checked, "is_required")
                    }}/>
                }
            },
            {
                title: '操作',
                dataIndex: 'operation',
                width: '25%',
                render: (text, record) =>
                    Store.modalData.length >= 1 ? (
                        <Popconfirm title="确定要删除该行?" onConfirm={() => this.handleDelete(record.key)}>
                            <Button type={"link"}>删除</Button>
                        </Popconfirm>
                    ) : null,
            },
        ];
    }

    addRow = () => {
        let data = Store.modalDataMap;
        console.log("count:",Store.count)
        data[Store.count] = {
            key:Store.count,
            field: "",
            label: "",
            is_edit: true,
            component: "FormInput",
            is_required: true
        };
        Store.modalData = Object.values(data);
        console.log(Store.modalData)
        Store.count = Store.count + 1;
    };

    handleDelete = (key) => {
        delete Store.modalDataMap[key];
        Store.modalData = Object.values(Store.modalDataMap);
    };

    handleFieldChange = (key,value,field) => {
        Store.modalDataMap[key][field] = value;
    };

    /**
     * 生成模型
     */
    generateModel = () => {
        let data = Object.values(Store.modalDataMap);
        console.log(data);
        let is_ok = true;
        for (let index in data){
            if (data[index]["field"].length === 0){
                message.error("字段不能为空");
                is_ok = false;
                break;
            }
            if (data[index]["label"].length === 0){
                message.error("注释不能为空");
                is_ok = false;
                break;
            }
        }

        if (Store.pageRoute === "null/null"){
            message.error("页面未选择");
            is_ok = false;
        }

        if (is_ok){
            simpleGenerate({"page":Store.pageRoute,"config":JSON.stringify(data),"type":Store.SIMPLE}).then(response => {
                Store.resultVisible = true;
                Store.title = response.data.msg;
                Store.processList = response.data.processList;
                Store.status = response.data.isSuccess ?  "success" : "error";

                if (response.data.code === 200){
                    let modelInfo = response.data.modelInfo;
                    Store.modelInfo = {
                        config: modelInfo["config"],
                        id: modelInfo["id"],
                        modelClass: modelInfo["model_class"],
                        modelClassName: modelInfo["model_class_name"],
                        page: modelInfo["page"],
                        tableName: modelInfo["table_name"],
                        type: modelInfo["type"],
                        update_at: modelInfo["update_at"],
                    };
                    console.log(response.data.modelInfo);
                }
            });
        }
    };

    render() {
        return <Fragment>
            <Alert closable showIcon type={"info"} message={"模型信息"}
                   style={{width: 750,marginBottom:"10px", color: '#31708f !important'}}
                   description={(<div>
                       数据表：{Store.modelInfo["tableName"]} <br/>
                       模型类：{Store.modelInfo["modelClass"]} <br/>
                       模型类名：{Store.modelInfo["modelClassName"]} <br/>
                       最后更新时间：{Store.modelInfo["update_at"]}
                   </div>)}
            />
            <Button onClick={this.addRow} icon={"plus"} type="primary" style={{ marginBottom: 16 }}>
                增加一行
            </Button>
            <Button onClick={this.generateModel} icon={"play-circle"} type="danger" style={{ marginBottom: 16 ,marginLeft:16}}>
                生成页面
            </Button>
            <Table
                bordered
                dataSource={Store.modalData}
                columns={this.columns}
                pagination={false}
            />
        </Fragment>;
    }
}

export default SimpleConfig;
